import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import './tab.css'




class Tab extends React.Component{
  constructor(props){
    super(props)

    this.state = {
          c1: 'content active',
          c2: "content"
    }
   this.clickEvent =  this.clickEvent.bind(this)

  }
  clickEvent(e){
    // console.log('Click');
    // console.log(e.target.dataset.index);

    let index = e.target.dataset.index
    
    console.log(index);
    if (index =='1') {
      this.setState({
          c1: 'content active',
          c2: "content"
        })
    }else{
      this.setState({
        c1: 'content ',
        c2: "content active"
      })
    }
  }

render(){
  return(
    <div>
      <button data-index='1' onClick={ this.clickEvent}>内容一</button>
      <button data-index='2' onClick={ this.clickEvent}>内容二</button>
      <div className = {this.state.c1}>
        <h1>内容一</h1>
      </div>
      <div className = {this.state.c2}>
        <h1>内容二</h1>
       </div>
    </div>
  )
}

}



class Clock extends React.Component{
  constructor(props){
    super(props)
    //状态（数据） --》View 
    //构造函数初始化数据，将需要改变的数据放在setState中。
    this.state = {
      time: new Date().toLocaleTimeString()
    }
  }

  render(){
    // console.log(11);
    // this.state.time = new Date().toLocaleTimeString();
    return (
      <div>
        <h1>当前时间：{this.state.time}</h1>

      </div>

    )
  }

  //生命周期函数,组件渲染完成时的函数
  componentDidMount(){
    setInterval( () => {

      // console.log(this.state.time);
      // this.state.time = new Date().toLocaleTimeString(); 错误
      //切勿直接修改state数据，直接stste重新渲染内容，需要使用setS
      //通过this。setstate修改完数据后，并不会立即修改dom里面的内容。react会在这个函数内部设计
      this.setState({
        time: new Date().toLocaleTimeString()
      })
      
    })
  }

}


  ReactDOM.render(
    <Tab /> ,
    document.querySelector('#root')
  )

    // console.log(new Date()); 不会初始化






// 
// 


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
